<template>
	<view class="content" :style="app_bg">
		<view class="topTitle" :style="'top:'+zhuangtai+'px'">
			<image class="back" @click="backClick" :src="publicimg.btn_back" mode=""></image>
			<view class="" style="font-size: 32rpx;">
				分销中心
			</view>
		</view>
		<view class="center" :style="'margin-top:'+(zhuangtai+52)+'px;'">
			<view class="search-input" :style="app_border_bg">
				<input class="search-input-text" :style="font_1st" type="text" v-model="keywords" />
				<image @click="selectFunction" class="search-css" src="../../static/search_icon.png" mode=""></image>
			</view>
			<view class="all-profit" :style="app_theme">
				<view class="profit-top" :style="app_border_bottom">
					<text class="font34" :style="font_1st">全部收益</text>
				</view>
				<view class="profit-list" ::style="font_1st">
					<view class="item font28">
						<image :src="appConfig.exp_icon" mode=""></image>
						<text>{{exp}}{{appConfig.exp_name}}</text>
					</view>
					<view class="item font28">
						<image :src="appConfig.game_coin_icon" mode=""></image>
						<text>{{game_coin}}{{appConfig.game_coin_name}}</text>
					</view>
					<view class="item font28">
						<image :src="appConfig.gold_coin_icon" mode=""></image>
						<text>{{gold_coin}}{{appConfig.gold_coin_name}}</text>
					</view>
					<view class="item font28">
						<image :src="appConfig.money_icon" mode=""></image>
						<text>{{money}}{{appConfig.money_name}}</text>
					</view>
				</view>
			</view>
			<view class="bottom-list" :style="app_theme">
				<view class="tab-list">
					<block v-for="(item, index) in tab_list" :key="index">
						<text :style="(tab_list_id == item.id?font_1st:font_3rd)+
										'font-size:'+(item.id == tab_list_id?'34rpx':'30rpx')" 
										@click="changeTabId(item.id)">{{item.name}}
						</text>
					</block>
				</view>
				<view class="btn-list" :style="font_1st">
					<view class="item" @click="changeType(1)">
						<image v-if="type_id == 1" class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn1.png" mode=""></image>
						<image v-else class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn2.png" mode=""></image>
						<text style="z-index: 1;">{{appConfig.exp_name}}</text>
					</view>
					<view class="item" @click="changeType(2)">
						<image v-if="type_id == 2" class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn1.png" mode=""></image>
						<image v-else class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn2.png" mode=""></image>
						<text style="z-index: 1;">{{appConfig.game_coin_name}}</text>
					</view>
					<view class="item" @click="changeType(3)">
						<image v-if="type_id == 3" class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn1.png" mode=""></image>
						<image v-else class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn2.png" mode=""></image>
						<text style="z-index: 1;">{{appConfig.gold_coin_name}}</text>
					</view>
					<view class="item" @click="changeType(4)">
						<image v-if="type_id == 4" class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn1.png" mode=""></image>
						<image v-else class="bgimgpublic" style="z-index: 0;" src="../../static/fenxiaobtn2.png" mode=""></image>
						<text style="z-index: 1;">{{appConfig.money_name}}</text>
					</view>
				</view>
				<block v-for="(item, index) in profit_list" :key="index">
					<view class="user-list-info" :style="app_border_bg">
						<view class="left">
							<image :src="item.avatar" mode=""></image>
							<view class="right">
								<text class="text1 font28" :style="font_1st">{{item.nickname}}</text>
								<text class="font24" :style="font_3rd">加入时间：{{item.create_time}}</text>
							</view>
						</view>
						<text class="font28 fontw500" v-if="type_id == 1" :style="font_1st">+{{item.amount}}{{appConfig.exp_name}}</text>
						<text class="font28 fontw500" v-if="type_id == 2" :style="font_1st">+{{item.amount}}{{appConfig.game_coin_name}}</text>
						<text class="font28 fontw500" v-if="type_id == 3" :style="font_1st">+{{item.amount}}{{appConfig.gold_coin_name}}</text>
						<text class="font28 fontw500" v-if="type_id == 4" :style="font_1st">+{{item.amount}}{{appConfig.money_name}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				publicTextColor:'',
				publicimg:'',
				zhuangtai:0,
				sign_rules:'',
				appConfig:'',
				tab_list_id:1,
				tab_list:[
					{
						id:1,
						name:'今日'
					},
					{
						id:2,
						name:'上周'
					},
					{
						id:3,
						name:'上月'
					},
					{
						id:4,
						name:'全部'
					}
				],
				type_id:1,
				page:1,
				size:10,
				tab:1,
				keywords:'',
				type:'exp',
				profit_list:[],
				exp:0,
				game_coin:0,
				gold_coin:0,
				money:0
			};
		},
		onShow() {
			let that = this
			let aniosgaodu = 0
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.zhuangtai = res.statusBarHeight;
					var a = res.model.split(' ');
					if (a[0] == 'iPhone') {
						aniosgaodu = 44;
					} else {
						aniosgaodu = 48;
					}
					that.zhuangtai = parseInt(that.zhuangtai)+4
					console.log(that.zhuangtai)
				}
			});
		},
		onLoad() {
			this.setcolorConfig()
			this.getprofitIndex()
		},
		onReachBottom() {
			this.page++
			this.getprofitIndex()
		},
		computed:{
			app_border_bottom(){
				return `border-bottom:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			user_margin_top(){
				return `margin-top:${(this.zhuangtai+52)}px;background:${this.publicTextColor.app_theme_color};`
			},
			app_border_bg(){
				return `background:${this.publicTextColor.app_border_color};`
			},
			app_theme(){
				return `background:${this.publicTextColor.app_theme_color};`
			},
			app_bg(){
				return `background:${this.publicTextColor.app_bg_color};`
			},
			font_1st(){
				return `color:${this.publicTextColor.font_1st_color};`
			},
			font_3rd(){
				return `color:${this.publicTextColor.font_3rd_color};`
			},
		},
		methods:{
			selectFunction(){
				this.page = 1
				this.getprofitIndex()
			},
			changeType(id){
				this.type_id = id
				this.page = 1
				switch (id) {
					case 1 :
						this.type="exp"
						break;
					case 2 :
						this.type="game_coin"
						break;
					case 3 :
						this.type="gold_coin"
						break;
					case 4 :
						this.type="money"
						break;
				}
				this.getprofitIndex()
			},
			changeTabId(id){
				this.tab_list_id = id
				this.page = 1
				this.getprofitIndex()
			},
			getprofitIndex(){
				let _self = this
				uni.request({
					url: util.getUrl("distribution/bonus"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						page:_self.page,
						size:_self.size,
						tab:_self.tab_list_id,
						keywords:_self.keywords,
						type:_self.type
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.money = res.data.data.money
							_self.gold_coin = res.data.data.gold_coin
							_self.game_coin = res.data.data.game_coin
							_self.exp = res.data.data.exp
							if(_self.page == 1){
								if(res.data.data.list.length>0){
									_self.profit_list = res.data.data.list
								}else{
									if(_self.keywords !=""){
										uni.showToast({
											title:'未查询到！',
											icon:'none'
										})
									}else{
										uni.showToast({
											title:'暂无更多信息！',
											icon:'none'
										})
									}
									_self.keywords = ""
									_self.profit_list =[]
								}
							}else{
								if(res.data.data.list.length>0){
									for(let key in res.data.data.list){
										_self.profit_list.push(res.data.data.list[key])
									}
								}else{
									_self.page --
									uni.showToast({
										title:'暂无更多信息！',
										icon:'none'
									})
								}
							}
						}
					},
				});
			},
			setcolorConfig(){
				this.publicTextColor = uni.getStorageSync("diyColor")
				this.publicimg = uni.getStorageSync("diyImg")
				this.appConfig = uni.getStorageSync("appconfig")
			},
			backClick(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.bottom-list{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		box-sizing: border-box;
		padding: 24upx 30upx 0 30upx;
		border-radius: 20upx;
		.user-list-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 630upx;
			border-radius: 20upx;
			padding: 22upx 30upx 22upx 23upx;
			margin-bottom: 30upx;
			.left{
				display: flex;
				align-items: center;
				.right{
					display: flex;
					flex-direction: column;
					width: 300rpx;
					.text1{
						margin-bottom: 17upx;
					}
				}
				image{
					width: 96upx;
					height: 96upx;
					margin-right: 22upx;
				}
			}
		}
		.btn-list{
			display: flex;
			align-items: center;
			width: 622upx;
			justify-content: space-between;
			margin-bottom: 30upx;
			.item{
				width: 131upx;
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				position: relative;
			}
		}
		.tab-list{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			margin-bottom: 30upx;
		}
	}
	.all-profit{
		display: flex;
		flex-direction: column;
		width: 690upx;
		border-radius: 20upx;
		padding-bottom: 33upx;
		margin-bottom: 30upx;
		.profit-list{
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			margin-top: 30upx;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				image{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					margin-bottom: 20upx;
				}
			}
		}
		.profit-top{
			width: 100%;
			padding: 34upx;
			display: flex;
			align-items: center;
			padding-bottom: 23upx;
		}
	}
	.center{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 750upx;
		box-sizing: border-box;
		padding: 30upx;
	}
	.search-input{
		display: flex;
		align-items: center;
		width: 690upx;
		height: 70upx;
		padding: 0 30upx;
		border-radius: 8upx;
		margin-bottom: 30upx;
		.search-input-text{
			width: 596upx;
		}
		.search-css{
			width: 32upx;
			height: 32upx;
			z-index: 3;
		}
	}
	.content{
		min-height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}
	.topTitle{
		color: #FFFFFF;
		display: flex;
		align-items: center;
		height: 67rpx;
		justify-content: center;
		position: absolute;
		z-index: 10;
		width: 100%;
		.back{
			width: 20rpx;
			height: 31rpx;
			position: absolute;
			left: 31rpx;
		}
	}
</style>
